<template>
  <div class="v-cell-control-list">
    <div class="v-cell-control-title">{{ x + 1 }} 行 {{ y + 1 }} 列</div>
    <div class="v-cell-control-item" @click="handleCommand(0)">向前增加一行</div>
    <div class="v-cell-control-item" @click="handleCommand(1)">向后增加一行</div>
    <div class="v-cell-control-item" @click="handleCommand(2)">向前增加一列</div>
    <div class="v-cell-control-item" @click="handleCommand(3)">向后增加一列</div>
    <div class="v-cell-control-item" @click="handleCommand(4)">移除本列</div>
    <div class="v-cell-control-item" @click="handleCommand(5)">移除本行</div>
    <div class="v-cell-control-item" @click="handleCommand(6)" divided v-if="w > 1 || h > 1">
      解除合并单元格
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {
  addRowPrev,
  addRowNext,
  addColPrev,
  addColNext,
  removeCol,
  removeRow,
  cancelMergeCol,
  cancelMergeRow
} from './utils'
const emits = defineEmits(['update:tables'])
const props = defineProps<{
  arr: any[][]
  x: number
  y: number

  id: string
  w: number
  h: number
}>()
const handleCommand = (command: number) => {
  let arr: any[][] = props.arr
  if (command === 0) {
    arr = addRowPrev(props.arr, props.x)
  } else if (command === 1) {
    arr = addRowNext(props.arr, props.x)
  } else if (command === 2) {
    arr = addColPrev(props.arr, props.y)
  } else if (command === 3) {
    arr = addColNext(props.arr, props.y)
  } else if (command === 4) {
    arr = removeCol(props.arr, props.y)
  } else if (command === 5) {
    arr = removeRow(props.arr, props.x)
  } else if (command === 6) {
    if (props.w > 1) {
      arr = cancelMergeCol(props.arr, props.x, props.y)
    }
    if (props.h > 1) {
      arr = cancelMergeRow(props.arr, props.x, props.y)
    }
  }
  emits('update:tables', arr)
}
</script>

<script lang="ts">
export default {
  name: 'VCellControl'
}
</script>
